<template>
	<view class="flex-col page">
		<view class="flex-col justify-start flex-auto group_2">
			<view class="flex-col">
				<!-- <view class="section uni-padding-wrap uni-common-mt"> -->
					<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem"
						styleType="text" activeColor="#008B8B"></uni-segmented-control>
				<!-- </view> -->

				<view class="content">
					<view class=" group_3" v-show="current === 0">
					  <hr class="top-divider">
					  <view class="flex-col items-start group_4 ">
					    <view v-for="(item,index) in productList" :key="index" class="list-item" @click="clicklistitem1(item)" style="width: 100%;">
					      <view class="item-wrapper" style="width: 100%;">
					        <image class="thumbnail" src="../../static/images/51276e00a4890f11936fcc00b81e6367.png"></image>
					        <view class="text">
					          <view class="title">{{ item.name_equip }}</view>
					          <view class="note">{{ item.id_equip }}</view>
					        </view>
					      </view>
						  <hr class="divider">
					    </view>
					  </view>
					  <!-- <hr class="bottom-divider"> -->
					</view>

					<view  v-if="productlist.length==0" class="flex-row justify-between items-center section_3" v-show="current === 1">
						<view class="flex-col items-center flex-auto group_12">
							<image class="image_6" src="../../static/images/3df4f07884a8ad9ee9c75f6b2f977539.png" /> 
							<text class="font_12 text_15">没有收到共享设备的邀请</text>
						</view>
					</view>
					<view v-else class="flex-row justify-between items-center section_3" v-show="current === 1">

						<uni-swipe-action>
							<uni-swipe-action-item v-for="(items, index) in productlist" :key="index"
								:right-options="options" @click="(action) => onClick(index, action)"
								@change="swipeChange()">
								<view class="full-width-divider">
									<uni-list class="font_3">
										<uni-list-item ellipsis="1" :title="getTitleText(items)">
										</uni-list-item>
									</uni-list>
								</view>
			 			</uni-swipe-action-item>
						</uni-swipe-action>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniList from "@/uni_modules/uni-list/components/uni-list/uni-list.vue"
	import uniListItem from "@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue"
	//获取用户绑定的设备列表
	import {
		_userequips
	} from "@/service/sharingequip.js"
	//（绑定人）可查看该设备共享给了其他哪些用户
	import {
		_otheruser
	} from "@/service/sharingequip.js"
	//接收共享申请或者共享邀请
	import {
		_agreesharing
	} from "@/service/sharingequip.js"
	//拒绝共享申请或者共享邀请
	import {
		_refusesharing
	} from "@/service/sharingequip.js"
	//获取某用户收到的所有共享申请以及共享邀请
	import {
		_allsharingapplyandinvite
	} from "@/service/sharingequip.js"
	//获取用户绑定的设备列表(绑定加共享)
	import {
		_getequiplistall
	} from '@/service/equip.js'

	import {
		rejects
	} from 'assert';
	import {
		access
	} from 'fs';
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				// account:'17805088097',
				account: '',
				items: [
		 		'共享',
					'接受',
				],
				current: 0,
				productList: [],
		 	productlist: [],
				options: [{
					text: '拒绝',
					style: {
						backgroundColor: '#dd524d'
					},
					action: 'reject' // 添加一个拒绝操作的标识
				}, {
					text: '接受',
					style: {
						backgroundColor: '#5F9EA0'
					},
					action: 'accept' // 添加一个接受操作的标识
				}],

				serialnum: '',
				listindex: null, //接受页面点击时列表的下标
				phoneaccount: '',

				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false,

				status: ''
			};
		},


		onLoad() {
			try {
				const value = uni.getStorageSync('userInfo');
				console.log(value)
				if (value != null) {
					this.account = value.accountNum
					console.log(this.account)
				}
			} catch (e) {
				console.error(e);
			}
			this.init(); //共享页面的渲染
			this.allapplyandinvite(); //接受页面的渲染

			try {
				const value = uni.getStorageSync('invitesharing');
				console.log(value)
				if (value != null) {
					this.serialnum = value.serialnum
					this.phoneaccount = value.phoneaccount
					console.log(this.account)
				}
			} catch (e) {
				console.error(e);
			}
		},

		created() {
			this.connectSocketInit()

		},
		methods: {

			// 跳转链接
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			async init() {
				let data = {
					account_user: this.account
				}
				let res = await _userequips(data);
				// let res=await _getequiplistall(data)
				this.productList = res.data;
				// this.serialnum=res.data.serialnum_equip;
				for (let i = 0; i < this.productList.length; i++) {
					let s = this.productList[i].serialnum_equip
					let data = {
						serialnum_sharingequip: s
					}
					let res = await _otheruser(data);
					if (res.data.length != 0) {
						this.productList[i].id_equip = res.data.length.toString() + '共享'
					} else {
						this.productList[i].id_equip = '未共享'
					}
				}
				console.log(this.productList); //打印出信息

			},
			clicklistitem1(data) {
				console.log(data);
				uni.setStorage({
					key: 'sharingequip1',
					data: data
				});
				this.navTo('/pages/sharingequipinfo1/sharingequipinfo1')
			},


			async allapplyandinvite() {
				let data = {
					account_sharingequip: this.account
				}
				let res = await _allsharingapplyandinvite(data);
				this.productlist = res.data;
				console.log(this.productlist);
			},


			async onClick(index, action) {
				this.listindex = index
				console.log(this.listindex)
				console.log(action.content.action)

				if (action.content.action == 'reject') {
					let data = {
						serialnum_sharingequip: this.productlist[this.listindex].serialnum_sharingequip,
						account_sharingequip: this.productlist[this.listindex].account_sharingequip
					}
					console.log(this.productlist[this.listindex].serialnum_sharingequip)
					console.log(this.productlist[this.listindex].account_sharingequip)
					let res = await _refusesharing(data);
					//websocket向后端发送消息
					if(this.productlist[this.listindex].type_sharingequip=='2'){
						this.status='REJECTINVITED'
					}else if(this.productlist[this.listindex].type_sharingequip=='3'){
						this.status='REJECTSHARE'
					}
					let datas = {
						sender: this.productlist[this.listindex].account_sharingequip,
						receiver: this.productlist[this.listindex].account_bindequip,
						// equipname: this.equipname,
						serialnum: this.productlist[this.listindex].serialnum_sharingequip,
						status: this.status
					};
					if (this.is_open_socket) {
						this.socketTask.send({
							data: JSON.stringify(datas), // 将对象转换为字符串发送
							async success() {
								console.log(datas);
								console.log("消息发送成功");
							},
						});
					}
					
					if (res.flag = true) {
						this.$api.msg('已拒绝！');
						// 更新界面数据，从列表中删除该项
						this.productlist.splice(this.listindex, 1);
					}
					console.log(res);
					
				} else if (action.content.action == 'accept') {
					let data = {
						serialnum_sharingequip: this.productlist[this.listindex].serialnum_sharingequip,
						account_sharingequip: this.productlist[this.listindex].account_sharingequip
					}
					let res = await _agreesharing(data);
					console.log(this.productlist[this.listindex].serialnum_sharingequip)
					console.log(this.account)
					//websocket向后端发送消息
					if(this.productlist[this.listindex].type_sharingequip=='2'){
						this.status='ACCEPTINVITED'
					}else if(this.productlist[this.listindex].type_sharingequip=='3'){
						this.status='ACCEPTAPPLI'
					}
					let datas = {
						sender: this.productlist[this.listindex].account_sharingequip,
						receiver: this.productlist[this.listindex].account_bindequip,
						serialnum: this.productlist[this.listindex].serialnum_sharingequip,
						status: this.status
					};
					if (this.is_open_socket) {
						this.socketTask.send({
							data: JSON.stringify(datas), // 将对象转换为字符串发送
							async success() {
								console.log(datas);
								console.log("消息发送成功");
							},
						});
					}
					
					if (res.flag == true) {
						this.$api.msg('已接受！');
						// 更新界面数据，从列表中删除该项
						this.productlist.splice(this.listindex, 1);
					}
					console.log(res);
				}
			},
			swipeChange(e) {

			},

			getTitleText(item) {
				// 根据列表项的类型返回对应的标题文本
				console.log(item); // 检查 item 的属性和值
				if (item.type_sharingequip === '3') {
					return "用户" + item.nickname_user + "向您申请" + item.name_equip + "的共享";
				} else if (item.type_sharingequip === '2') {
					return "账号" + item.account_bindequip + "的用户邀请您共享设备：" + item.name_equip;;
				}
			},
		
			connectSocketInit() {
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					url: 'ws://43.142.102.167:8088/woonsocket/' + this.account,
					success(data) {
						console.log("websocket连接成功");
					},
				});
				this.socketTask.onOpen((res) => {
					console.log(" WebSocket连接正常打开中...！");
					this.is_open_socket = true;
				});

				this.socketTask.onMessage((res) => {
					console.log("收到服务器内容：");
					console.log(res.data);
					this.$api.msg(res.data)
					this.sharemsg = res.data
				});

				this.socketTask.onClose(() => {
					console.log("WebSocket已经被关闭了");
					this.is_open_socket = false;
				});
			},

		},
	};
</script>

<style scoped lang="scss">
	.full-width-divider {
		width: 100%;
	}

	.full-width-divider>>>.uni-list-item:after {
		content: "";
		display: block;
		height: 1px;
		width: calc(100% - 24px);
		margin: 0 12px;
		background-color: #ccc;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group_2 {
			height: 1177.08rpx;
			overflow-y: auto;

			.section {
				padding: 10.33rpx 0 10rpx;
				background-color: #e5e5e540;

				.text_5 {
					color: #138f87;
					font-size: 31.25rpx;
					font-family: SourceHanSansCN;
					line-height: 29.17rpx;
				}

				.image_133 {
					width: 40%;
					height: 250rpx;
				}

				.text_6 {
					margin-right: 258.33rpx;
					font-weight: unset;
					margin-bottom: 10rpx;
				}
			}

			.space-x-24-reverse {

				&>view:not(:last-child),
				&>text:not(:last-child),
				&>image:not(:last-child) {
				}
			}

			.group_3 {
				// padding: 54.17rpx 0 722.92rpx;
				padding: 54.17rpx 0 0;
				
				.group_4 {
					padding: 33.33rpx 50.83rpx;
					width: 100%;
					.text_7 {
						line-height: 30.21rpx;
					}

					.text_8 {
						margin-left: 8.33rpx;
						line-height: 19.79rpx;
					}
				}

				.image_7 {
		 		width: 27.08rpx;
					height: 27.08rpx;
				}

				.image_5 {
					border-radius: 50%;
					width: 156.25rpx;
					height: 152.08rpx;
					margin-left: 550rpx;
		 		margin-top: 20rpx;
		 	}

				.space-y-20 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 41.67rpx;
					}
				}

				.section_2 {
					padding: 33.33rpx 170.83rpx 25rpx;
					background-color: #e5e5e533;

					.text_9 {
						line-height: 30.21rpx;
					}

					.text_10 {
						line-height: 19.79rpx;
					}
				}

				.space-y-24 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 50rpx;
					}
				}

				.font_3 {
					font-size: 20.83rpx;
					font-family: SourceHanSansCN;
					line-height: 18.75rpx;
					color: #808080;
				}
			}

			.font_2 {
				font-size: 30rpx;
				font-family: SourceHanSansCN;
				line-height: 29.17rpx;
				font-weight: 700;
				color: #000000;
			}
		}

		.section_3 {
			padding: 62.5rpx 8.33rpx 62.5rpx 29.17rpx;
			// background-color: #e5e5e533;
			margin-top: 30rpx;
			line-height: 80rpx;

			.space-x-14 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 29.17rpx;
				}

				.font_3 {
					width: 100%;
					/* 设置宽度为100% */
				}

				.font_1 {
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					line-height: 25rpx;
				}

				.text_6 {
					color: #138f87;
					font-size: 27.08rpx;
				}

				.text_7 {
					color: #383838;
					font-size: 27.08rpx;
				}
			}
		}

	}
	.thumbnail{
		height: 55rpx;
		width: 55rpx;
	}
	.item-wrapper {
	  display: flex;
	  align-items: center;
	}
	.top-divider,.bottom-divider {
	  height: 0.1px;
	  background-color: #ccc;
	  margin-left: 5%;
	  opacity: 0.15;
	  width: 90%;
	  margin-bottom: -1%;
	}
	
	.text{
	  margin-left: 6%;
	}
	.title{
	  font-size: 28rpx;
	}
	.note{
	  font-size: 16rpx;
	  color: #a6a6a6;
	}
	.list-item {
	  padding-bottom: 1px;
	}
	
	.divider {
	  // height: 1px;
	  // background-color: #ccc;
	  // border: none;
	  // // margin: 0;
	  width: 105%;
	  margin-left: -2%;
	  margin-top: 3%;
	  height: 0.1px;
	  background-color: #ccc;
	  // margin-left: 5%;
	  opacity: 0.15;
	  // width: 90%;
	  margin-bottom: 3%;
	}
	.group_12{
		padding: 329.17rpx 0 333.33rpx;
		overflow-y: auto;
		.image_6 {
		  width: 154.17rpx;
		  height: 147.92rpx;
		}
		.text_15 {
		  color: #a6a6a6;
		}
	}
	.font_12 {
	  font-size: 31.25rpx;
	  font-family: SourceHanSansCN;
	  line-height: 29.17rpx;
	}

</style>
